<template>
  <div>
    <form action="">
      <div>
        <input type="text" placeholder="请输入您的用户名" v-model="user.name">
      </div>
      <div>
        <input type="text" name="password" placeholder="请输入不少于6位密码" id="password" v-model="user.password">
      </div>
      <div>
        性别：
        <input type="radio" name="sex" id="men" v-model="user.sex" value="men">
        <label for="">男</label>
        <input type="radio" name="sex" id="women" v-model="user.sex" value="women">
        <label for="">女</label>
      </div>
      <div>
        你的兴趣爱好有以下哪些？
        <div v-for="(item,index) in hobbies" :key="index">
          <input type="checkbox" name="item.value" :value="item.value" v-model="user.hobbylist">
          <label for="">{{item.hobby}}</label>
        </div>
      </div>
      <div>
        <button type="submit" @click.prevent="submit()">提交</button>
        <button type="reset" @click="reset()">重置</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'liu',
  data(){
    return{
      user:{
        name:"",
        password:"",
        sex:"",
        hobbylist:[]
      },
      hobbies:[
        {value:"football",hobby:"足球"},
        {value:"basketball",hobby:"篮球"},
        {value:"ping-pong-ball",hobby:"乒乓球"}
      ]
    }
  },
  methods:{
    submit(){
      console.log(this.user)
    },
    reset(){
      console.clear()
    }
  }
}
</script>

<style>


</style>
